<template>
    <div class="container">
      <div class="tips-title">1.基础用法</div>
      <div class="tips-title-sub">滑动页面到底部即可看到按钮。实例demo在home页面(home.vue)</div>
      <el-input type="textarea" :rows="3" v-model="data1"></el-input>
      <h3></h3>
      <div class="tips-title">2.自定义显示内容</div>
      <div class="tips-title-sub">滑动页面到底部即可看到按钮。</div>
      <el-input type="textarea" :rows="6" v-model="data2"></el-input>
      <div v-for="index in 150" :key="index">&nbsp;</div>
    </div>
</template>
<script>
  export default {
    name: 'o-backtop',
    data() {
      return {
        data1: "<el-backtop target='.main-content'></el-backtop>",
        data2: "<el-backtop target=\".page-component__scroll .el-scrollbar__wrap\" :bottom=\"100\">\n" +
        "  <div style=\"{height: 100%;width: 100%;background-color: #f2f5f6;box-shadow: 0 0 6px rgba(0,0,0, .12);text-align: center;line-height: 40px;color: #1989fa;}\">\n" +
        "    <span>UP</span>\n" +
        "  </div>\n" +
        "</el-backtop>"
      }
    }
  }
</script>
<style>
  .obacktop{
    overflow: auto;
  }
</style>
